<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2023-01-04 13:46:46
 * @LastEditors: xuzp4
 * @LastEditTime: 2023-01-10 17:05:12
 * @FilePath: \vue_demo\src\view\threejs\lights.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
import typefaceFont from "three/examples/fonts/helvetiker_regular.typeface.json";
import { FontLoader } from "three/examples/jsm/loaders/fontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
export default {
  mounted() {
    // debug
    const gui = new dat.GUI();
    // canvas
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();
    // Axes helper
    // const axesHelper = new THREE.AxesHelper();
    // scene.add(axesHelper);

    // Lightslightlightrect
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    // scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.3);
    directionalLight.position.set(1, 0.25, 0);
    // scene.add(directionalLight);
    const HemisphereLight = new THREE.HemisphereLight(0xff0000,0x0000ff,1)
    // scene.add(HemisphereLight)
    const pointLight = new THREE.PointLight(0xff9000, 0.5,10,2);
    pointLight.position.set(1, -0.5, 1);
    // scene.add(pointLight);
    const rectAreaLight = new THREE.RectAreaLight(0x4e00ff,2,3,1)
    scene.add(rectAreaLight)
    // gui.add(ambientLight, "intensity").min(0).max(1).step(0.01);
    // material
    const material = new THREE.MeshStandardMaterial();
    material.roughness = 0.4;

    // Objects
    const sphere = new THREE.Mesh(
      new THREE.SphereBufferGeometry(0.5, 32, 32),
      material
    );
    sphere.position.x = -1.5;
    const cube = new THREE.Mesh(
      new THREE.BoxBufferGeometry(0.75, 0.75, 0.75),
      material
    );
    scene.add(sphere);
    scene.add(cube);
    // Texture
    const textureLoader = new THREE.TextureLoader();
    // cube
    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    // camera.lookAt(cube.position);
    scene.add(camera);
    const controls = new OrbitControls(camera, canvas);
    controls.enableDamping = true;
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);
    // animation
    const tick = () => {
      controls.update();
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>
</style>